<!--
 * @Descripttion: 头部过滤条件
 * @version: 
 * @Author: wl
 * @Date: 2020-07-07 10:46:35
 * @LastEditors: wl
 * @LastEditTime: 2020-07-07 15:20:01
--> 
<template>
    <div class="filter-box" @keydown.stop="keyEvent">
        <div :class="'form-box'+ (close&&!findShow?'close':'')">
            <form-editor
           :labelPosition='labelPosition'
           :dataForm='data'
           :config='config'
           ref=form
            >
            </form-editor>
        </div>
        <div>
            <el-button
            type="default"
            class="normal-btn query-btn"
            @click="handleQuery"
            >
            查询
            </el-button>
            <slot name='tool'></slot>
            <i v-if="close" @click="openFilter" :class="'el-icon-d-arrow-right open-icon'+( findShow ?'':'close')">
            </i>
        </div>
        <p v-if="border" class="page-line"></p>
    </div>  
</template>

<script>
export default {
    data(){
        return{
            findShow:false
        }
    },
    props:{
        config:{
            type:Array,
            default:()=>{
                return [];
            }
        },
        data:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        close:{
            type:Boolean,
            default:false
        },
        border:{
            type:Boolean,
            default:true
        },
        labelPoition:{
            type:String,
            default:'right'
        }


},
methods:{
    handleQuery:function(){
        this.$emit('query');
    },
    openFilter:function(){
        this.findShow=!this.findShow
    },
    keyEvent:function(e){
        let event=e||window.event;
        if (event.keyCode==13) {
            this.handleQuery()
        }
    }
}
}
</script>

<style lang='scss'>
.filter-box{
    width: 100%;
    padding: 10px 0;
}
.tool-box{
    padding: 10px;
    line-height: 36px;
}
.open-icon{
    margin-left: 10px;
    font-size: 18px;
    transform: rotate(-90deg);
    cursor: pointer;
    transform: transform 0.3s;
}

</style>